<template>
    <!-- 订单列表组件 -->
    <div class="table">
      <div class="title">
          <span 
            class='title-item' 
            v-for="(item, index) in title" 
            :style="settingWidth(width[index])"
            :key="item.id"
          >{{item.name}}</span>
      </div>
      <div class="list-wrapper">
        <ul>
          <li v-for="(item,index) in getCurrentCart" :key="item.id" class="list-item border-bottom">
            <span class="row-item" :style="settingWidth(width[0])">
              {{item.mainPlayMode}}
            </span>
            <span class="row-item more" :style="settingWidth(width[1])">
              <p class="row-item-text">{{item.numberStr}}</p>
              
              <span class="detail" v-show="item.detailNumberInfo">
                <span class="detail-text" 
                  @mouseenter="handleMouseEnter(index)"
                  @mouseleave="handleMouseLeave"
                >详情</span>
                <div class="popover-wrapper" v-show="activeDetailIndex == index">
                  <bc-popover>
                    <div class="content">
                      <span 
                        v-for="(item, index) in item.detailNumberInfo.split(',')" 
                        class="detail-item"
                        :key="index">
                        {{item}}
                      </span>
                    </div>
                  </bc-popover>
                </div>
              </span>
            </span>
            <span class="row-item" :style="settingWidth(width[2])">
              {{item.refundRate}}
            </span>
            <span class="row-item" :style="settingWidth(width[2])">
              {{item.unitPrice}}
            </span>
            <span class="row-item green" :style="settingWidth(width[3])">
              {{item.totalAmount}}
            </span>
            <span class="row-item red" :style="settingWidth(width[4])">
              {{item.bonous}}
            </span>
            <span class="row-item cancel" :style="settingWidth(60)" @click="deletePreorder(index)">
              <i class="iconfont iconty_guanbi"></i>
            </span>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
import BcPopover from '@/components/bc-popover/bc-popover'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    BcPopover
  },
  data() {
    return {
      activeDetailIndex: -1
    }
  },
  props: {
    title:{
      type: Array,
      default: function() {
          return[
              {
                  orderNumber: 12345687891231231, //订单编号
                  prizeNumber: '12 21 45 02',         //开奖号码
                  bettingTime: '01/30 09:21:15',      //投注时间
                  wayOfPlay: '重庆时时彩-五星直选复式',       //玩法
                  number: '1111111',                  //期号
                  purchaseContent: '4,8,4,5,2,0,0',   //购买内容
                  returnPoint: '0.20%',           //返点
                  purchaseAmount: 2500,           //购买金额
                  status: 5000.00                 //最高奖金
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  prizeNumber: '12 21 45 02',
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '1111111',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 3000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0,0,0,0,',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 0.10
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 1100.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
              {
                  prizeNumber: '12 21 45 02',
                  orderNumber: 1234568789,
                  bettingTime: '01/30 09:21:15',
                  wayOfPlay: '重庆时时彩-五星直选复式',
                  number: '170306095',
                  purchaseContent: '4,8,4,5,2,0,0',
                  returnPoint: '0.20%',
                  purchaseAmount: 2500,
                  status: 7000.00
              },
          ]
      }
    },
    width: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  filters:{
      //保留小数点后两位
      filterNumber(value){
          let realVal = parseFloat(value).toFixed(2)
          return realVal
      },
      //超出字符显示省略号
      filterContent(value){
          if( !value ){
              return '';
          }else if( value.length > 15 ){
              return value.slice(0,15) + '...';
          }
          return value;
      },
      
  },
  methods:{
      //撤单事件
    chedan(index){
      this.ddd.splice('index',1)
      // this.$emit('chedan',index)
    },
    settingWidth(width) {
      return `width:${width}px`
    },
    handleMouseEnter(index) {
      this.activeDetailIndex = index 
    },
    handleMouseLeave() {
      this.activeDetailIndex = -1
    },
    deletePreorder(index) {
      this.deleteOrder(index)
    },
    ...mapMutations('lottery', {
      deleteOrder: 'SET_DELETE_ORDER'
    })
    
  },
  computed: {
    ...mapGetters('lottery', ['getCurrentCart'])
  }

}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
    .table 
      width 100%
      height 160px
      border-radius 5px 
      position relative 
      // border 1px solid green
      ul
        list-style none;
        width 100%
        box-sizing border-box 
        padding-top 32px 
        .list-item 
          height 32px 
          color $color-theme-dark 
          display flex 
          align-items center 
          .row-item 
            text-align left 
            box-sizing border-box 
            padding-left 12px 
            .detail 
              margin-left 10px
              position relative 
              .detail-text 
                color $color-theme-red 
              .popover-wrapper 
                position absolute 
                display flex 
                justify-content center 
                top -40px 
                left 50%
                min-width 500px 
                transform translateX(-50%)
                z-index 1000
                .content 
                  display flex 
                  align-items center 
                  padding 0 10px 
                  .detail-item 
                    display inline-block
                    color #fff
                    margin-right 3px 
            &.red 
              color $color-theme-red 
            &.green 
              color $color-ball-green 
            &.cancel 
              text-align right 
              padding-right 12px
              .iconfont 
                color $color-sub-grey
                font-size 20px
            .row-item-text
              // display: -webkit-box;
              // word-break: break-all;
              // overflow: hidden;
              // -webkit-box-orient: vertical;
              // -webkit-line-clamp: 1;
              text-overflow: ellipsis;
              overflow hidden;
              white-space: nowrap;
      .title
        width 100% 
        height 32px
        display flex 
        align-items center 
        background-color $color-theme-dark 
        border-top 1px solid #dbd3d3
        border-top-left-radius 5px
        border-top-right-radius 5px
        font-weight bold
        box-sizing border-box;
        color #fff 
        position absolute 
        z-index 1000 
        .title-item  
          text-align left 
          box-sizing border-box 
          padding-left 12px 
          border-right 1px solid #2c313b
        .purchaseAmount
          color #5a4844
        .status
          color #5a4844;
      .list-wrapper 
        width 100%
        height 170px 
        overflow-y scroll
</style>